<template>
  <div>
    <el-drawer
      title="创建新用户"
      :visible.sync="drawer"
      direction="rtl"
      :wrapper-closable="false"
      :before-close="handleClose"
      size="40%"
    >
      <div class="drawer-container">
        <el-form ref="create-user-form" :model="form" :rules="rules" label-width="130px">
          <el-form-item label="用户名：" prop="userName">
            <el-input v-model="form.userName" />
          </el-form-item>
          <el-form-item label="昵称：" prop="nickName">
            <el-input v-model="form.nickName" />
          </el-form-item>
          <el-form-item label="邮箱：" prop="email">
            <el-input v-model="form.email" />
          </el-form-item>
          <el-form-item label="手机号：" prop="phoneNumber">
            <el-input v-model="form.phoneNumber" />
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="form.password" type="password" />
          </el-form-item>
          <el-form-item label="确认密码：" prop="confirmPassword">
            <el-input v-model="form.confirmPassword" type="password" />
          </el-form-item>
          <el-form-item label="自我描述描述：">
            <el-input v-model="form.introduction" type="textarea" placeholder="描述一下自己吧" />
          </el-form-item>
        </el-form>
        <el-button style="float:right;" type="primary" @click="createUser">创建</el-button>
      </div>
    </el-drawer>
    <vxe-toolbar>
      <template #buttons>
        <vxe-button @click="createNewUser">创建新用户</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table :align="allAlign" :data="tableData">
      <vxe-column type="seq" width="60" />
      <vxe-column field="userName" title="用户名" />
      <vxe-column field="nickName" title="昵称" />
      <vxe-column field="avatar" title="头像" type="html" show-overflow />
      <vxe-column field="phoneNumber" title="电话号码" />
      <vxe-column field="enabled" title="激活" />
      <vxe-column field="locked" title="是否锁定" />
      <vxe-column field="rolesZh" title="权限列表" />
      <vxe-column field="createdTime" title="创建时间" />
      <vxe-column field="updatedTime" title="更新时间" />
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.totalResult"
      :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
import { validEmail } from '@/utils/validate'
import { register } from '@/api/user'
import { getAllUserByPage } from '@/api/user-controller'

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入邮箱!'))
      } else if (!validEmail(value)) {
        callback(new Error('请输入正确的邮箱!'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      allAlign: 'left',
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0
      },
      tableData: [],
      drawer: false,
      form: {
        userName: '',
        nickName: '',
        password: '',
        confirmPassword: '',
        phoneNumber: '',
        avatar: '',
        introduction: '',
        email: ''
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '请输入昵称', trigger: 'change' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请输入昵称', trigger: 'change' },
          { validator: validatePass, trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, message: '请填写电话号码', trigger: 'change' }
        ],
        email: [
          { required: true, message: '请填写邮箱', trigger: 'change' },
          { validator: validateEmail, trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    createNewUser() {
      this.drawer = true
    },
    createUser() {
      this.submitForm('create-user-form')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          register(this.form).then(response => {
            this.$message({
              message: response,
              type: 'success'
            })
            this.drawer = false
            this.getList()
          })
        } else {
          return false
        }
      })
    },
    handleClose() {
      this.drawer = false
    },
    getList() {
      this.loading = true
      getAllUserByPage(this.tablePage.currentPage - 1, this.tablePage.pageSize).then(response => {
        response.data.content.forEach(item => {
          item.avatar = `<img height="40" src="${item.qbootUserInfo.avatar}">`
        })
        response.data.content.forEach(user => {
          user.rolesZh = ''
          user.role_users.forEach(item => {
            user.rolesZh = user.rolesZh + `${item.roleNameZh}\n`
          })
        })
        this.tableData = response.data.content
        this.tablePage.totalResult = response.data.totalElements
        this.loading = false
      })
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer-container{
  padding:10px 30px 0 30px;
}
</style>>
